<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/2/21
  Time: 19:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>教师登陆</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/teaLogin/css/style.css">

    <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/slidingVerification/js/yz.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        button{width: 300px;line-height: 30px;}
        .box {
            margin: 0 auto;
            position: absolute;
            left: 50%;
            top: 50%;
            height: 420px;
            width: 300px;
            margin-left: -150px;
            margin-top: -210px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 25px;
            display: none;
            z-index: 2;
        }

        .top-s {
            font-size: 12px;
            color: #ccc;
            display: block;
            text-align: center;
            margin-left: 25px;
            margin-top: 25px;
            margin-bottom: 5px;
        }

        .top-x {
            font-size: 18px;
            color: black;
            display: block;
            text-align: center;
            margin-bottom: 45px;
        }

        .cuo {
            float: right;
            margin-right: 10px;
            margin-top: 5px;
            cursor: pointer;
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

</head>

<body>


<div class="container">
    <div class="info">
        <h1>教师登陆</h1><span>Made with <i class="fa fa-heart"></i> by HuangJiaLin</span>
    </div>
</div>
<div class="form">
    <div class="thumbnail"><img src="${pageContext.request.contextPath}/static/teaLogin/css/hat.svg"/></div>
    <form id="teaLogin" name="teaLogin" class="login-form" action="${pageContext.request.contextPath}/teacher/login" method="get">
        <input type="text" name="teacherNo" placeholder="工号"/>
        <input type="password" name="teacherPwd" placeholder="密码"/>
        <button class="btn" type="submit">login</button>

        <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

        <div class="box">
            <img src="${pageContext.request.contextPath}/static/slidingVerification/image/cw.png" class="cuo">
            <span class="top-s">身份验证</span>
            <span class="top-x">拖动滑块，使图片角度为正</span>
            <div id="rotateWrap1">
                <div class="rotateverify-contaniner">
                    <div class="rotate-can-wrap">
                        <canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
                        <div class="statusBg status-bg"></div>
                    </div>
                    <div class="control-wrap slideDragWrap">
                        <div class="control-tips">
                            <p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
                        </div>
                        <div class="control-bor-wrap controlBorWrap"></div>
                        <div class="control-btn slideDragBtn">
                            <i class="control-btn-ico"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            // 加一个div全部 然后设置display：block；
            $(function () {
                // 点击按钮
                $(".btn").click(function () {
                    console.log('123123');
                    $(".box").css("display", "block");
                    $("body").css({ "background": "#807878" });
                    $(".btn").attr("disabled", true);
                })
                //    点击x
                $(".cuo").click(function () {
                    $(".box").css("display", "none");
                    $("body").css("background", "#fff");
                    $(".btn").attr("disabled", false);
                })
                //1
                var myRotateVerify = new RotateVerify('#rotateWrap1', {
                    initText: '滑动将图片转正',//默认
                    slideImage: ['${pageContext.request.contextPath}/static/slidingVerification/image/1.png',
                        '${pageContext.request.contextPath}/static/slidingVerification/image/2.png',
                        '${pageContext.request.contextPath}/static/slidingVerification/image/4.png',
                        '${pageContext.request.contextPath}/static/slidingVerification/image/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
                    slideAreaNum: 10,// 误差范围角度 +- 10(默认)
                    getSuccessState: function (res) {//验证通过 返回  true;
                        document.teaLogin.submit();
                        // console.log('例1' + res);
                    }
                })
            })
        </script>

        <!--+++++++++++++++++++++++++++++++++++++++++++++++++++++-->

        <span style="color:red;">${loginErrorMsg}</span>
        <p class="message">Forget password? <a href="${pageContext.request.contextPath}/teacher/toForgetPwd">Retrieve password</a></p>
    </form>
</div>
<script src='${pageContext.request.contextPath}/static/teaLogin/js/jquery.min.js'></script>
<script  src="${pageContext.request.contextPath}/static/teaLogin/js/index.js"></script>
</body>

</html>
